<template>
	<div class="setting-goods">
		<!-- 提示 -->
		<!-- <div class="ls-card">
			<el-alert :title="$t('温馨提示：应工信部的要求,请务必填写公安备案号和网站备案号，保存的备案信息，将展示在后台登陆页面。')" type="info" :closable="false"
				show-icon  />
		</div> -->
		<!-- 主要内容 -->
		<el-form ref="goodsSettingsRef" :model="goodsSettings" label-width="120px" size="small">
			<!-- 店铺信息 -->
			<div class="ls-card">
				<div class="card-title">{{$t('商品信息')}}</div>
				<div class="card-content m-t-24">
					<!-- <el-form-item label="商品默认主图">
						<material-select :limit="1" v-model="goodsSettings.image" />
						<div class="flex">
							<div class="muted xs m-r-16">建议尺寸：800*800像素，支持jpg，jpeg，png格式</div>
							<el-popover placement="right" width="200" trigger="hover">
								<el-image
									src="https://img2.baidu.com/it/u=3357699356,1912406716&fm=26&fmt=auto&gp=0.jpg" />
								<el-button slot="reference" type="text">{{$t('查看示例')}}</el-button>
							</el-popover>
						</div>
					</el-form-item> -->
					<el-form-item :label="$t('商品详情显示库存')">
						<div class="flex">
							<el-switch v-model="goodsSettings.is_show" :active-value="1" :inactive-value="0"
								:active-color="styleConfig.primary" inactive-color="#f4f4f5"/>
							<span class="m-l-16">{{ goodsSettings.is_show ? '显示' : '不显示' }}</span>
						</div>
						<div class=" muted xs">{{$t('商品详情显示剩余库存数量，默认不显示')}}</div>
					</el-form-item>
				</div>
			</div>
		</el-form>
		<!--  表单功能键  -->
		<div class="bg-white ls-fixed-footer">
			<div class="row-center flex" style="height: 100%">
				<!-- <el-button size="small" @click="$router.go(-1)">取消</el-button> -->
				<el-button size="small" type="primary" @click="putGoodsSettings()">{{$t('保存')}}</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts">

 import  i18n from '@/plugins/i18n' 
	import {
		Vue,
		Component
	} from 'vue-property-decorator'
	import MaterialSelect from '@/components/material-select/index.vue'
	import {
		apiGoodsSettings,
		apiGoodsSettingsAdd
	} from '@/api/setting/goods'
	import {
		GoodsSettings_Req
	} from '@/api/setting/goods.d.ts'
	@Component({
		components: {
			MaterialSelect,
		},
	})
	export default class SettingGoods extends Vue {
		/** S Data **/
		// 表单数据
		goodsSettings: GoodsSettings_Req = {
			image: '', //商品主图
			is_show: 0 //是否显示:0-否;1-是;
		}
		/** E Data **/

		// 获取商品设置
		getGoodsSettings() {
			apiGoodsSettings()
				.then((res: any) => {
					this.goodsSettings = res
					// this.$message.success('数据请求成功!')
				})
				.catch(() => {
					// this.$message.error('数据请求失败!')
				})
		}
		// 修改商品设置
		putGoodsSettings() {
			apiGoodsSettingsAdd(this.goodsSettings)
				.then((res: any) => {
					// this.$message.success('保存成功!')
					this.getGoodsSettings()
				})
				.catch(() => {
					// this.$message.error('保存失败!')
				})
		}
		/** S Life Cycle **/
		created() {
			this.getGoodsSettings()
		}
		/** E Life Cycle **/
	}
</script>

<style lang="scss" scoped>
	.ls-card {
		.ls-input {
			width: 280px;
		}

		.card-title {
			font-size: 14px;
			font-weight: 500;
		}

		.login_limit-unit {
			display: inline-block;
			width: 2em;
			text-align: center;
		}
	}
</style>
